<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/xiangqing.css" />
    <link rel="stylesheet" type="text/css" href="css/dingdan.css" />

</head>

<body>
    <div class="header">
        <div class="header-con">
            <div class="header-first">
                <ul>
                    <li><a href="" class="first">amigo账号登录</a></li>
                    <li><a href="http://10.35.162.123/jinlixiangmu/denglu.html">原账号登录</a></li>
                    <li><a href="http://10.35.162.123/jinlixiangmu/zhuce.html">注册</a></li>
                    <li><a href="" class="iconfont icon-gouwuche last">购物车(0)</a>
                        <div class="dtext">
                            您的购物车是空的，快去挑选喜欢的商品吧！
                        </div>
                    </li>
                </ul>
            </div>
            <img src="img/images/1_03.png" />
            <div class="login">
                <ul>
                    <li><a href="http://10.35.162.123/jinlixiangmu/index.html">首页</a></li>
                    <li><a href="" class="titt">手机</a></li>
                    <li><a href="">配件</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">下载</a></li>
                    <li><a href="">amigoOS</a></li>
                    <li class="dactor"><input id="goid" placeholder="输入搜索内容" />
                        <a href="" class="iconfont icon-search"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <div class="main">
        <div class="main-h">
            <p>添加收货地址</p>
            <form class="sitebox">
                <input type="text" class="name" placeholder="姓名" value=""><input type="text" class="tel" placeholder="手机号">
                <br>
                <!-- <select type="text"> -->
                所在地区： <input type="text" value="" id="addr-show">

                <!-- 省份选择 -->
                <select id="prov" name="prov" onchange="showCity(this)">
						   <option>=请选择省份=</option>
						  </select>
                <!-- 城市选择 -->
                <select id="city" onchange="showCountry(this)">
						   <option>=请选择城市=</option>
						  </select>
                <!-- 区县选择 -->
                <select id="country" onchange="selectCountry(this)">
						   <option>=请选择县区=</option>
						  </select>

                <button type="button" class="btn" onClick="showAddr()">确定</button>
                <!-- </select> -->
                <br>
                <textarea name="" id="inDetail" placeholder="详细地址"></textarea>
            </form>
            <p>商品</p>
            <div class="goodsbox"><img src="img/ia_600000012_5.jpg" alt="">
                <p class="data-name">Apple iPhone 12 Pro Max 6.7英寸高清全面屏 海蓝色</p>
                <p class="pricebox"><span class="data-price">10099.00</span>元 X <span class="data-num">1</span></p>
                <p class="pricebox2"><span class="data-price1">10099.00</span>元</p>
            </div>
            <p class="delivery">配送方式<span>包邮</span></p>
            <p class="delivery">发票 <span>电子普通发票</span><span>个人</span><span>商品明细</span><span>修改 ></span></p>
            <div class="copeWithbox">
                <p>商品件数： <span><i class="data-num">1</i>件</span></p>
                <p>商品总价： <span><i class="data-price1">10099.00</i>元</span></p>
                <!-- <p>应付总额： <span><i class="data-price2">10099</i>元</span></p> -->
            </div>
            <div class="backcart">
                <button class="orange">去结算</button><button>返回购物车</button>
            </div>
        </div>
    </div>




    <div id="lasts">
        <div id="lasts-con">
            <ul>
                <li><img src="img/images/D-_userAJAX_htdocs_二生三_img_金立_03.png"></li>
                <li><img src="img/images/金立_04.png"></li>
                <li><img src="img/images/D-_userAJAX_htdocs_二生三_img_金立_03.png"></li>
                <li><img src="img/images/金立_04.png"></li>
            </ul>
        </div>
    </div>
    <div class="fonterr">
        <div class="fonterr-con">
            <div class="one">
                <h5>关于金立</h5>
                <p>企业荣誉</p>
                <p>金立体验店</p>
                <p>代理商专区</p>
                <p>加入金立</p>
                <p>联系我们</p>
                <p>供应/服务商需求咨询</p>
            </div>
            <div class="two">
                <h5>新闻咨询</h5>
                <p>公司新闻</p>
                <p>媒体报道</p>

            </div>
            <div class="three">
                <h5>购物指南</h5>
                <p>购物流程</p>
                <p>支付方式</p>
                <p>配送说明及费用</p>
                <p>订单管理</p>
                <p>购买常见问题</p>
                <p>预置应用公示</p>
            </div>
            <div class="four">
                <h5>售后服务</h5>
                <p>售后政策</p>
                <p>售后服务网点</p>
                <p>上门维修</p>
                <p>签收须知</p>
                <p>物流查询</p>
            </div>
            <div class="five">
                <h5>关注我们</h5>
                <p class="iconfont icon-weibo">&nbsp;新浪微博</p>
                <p class="iconfont icon-tengxunweibo">&nbsp;腾讯微博</p>
                <p class="iconfont icon-qzone">&nbsp;QQ空间</p>

            </div>
            <img src="img/images/code.png" />
            <span>扫一扫关注微信</span>
        </div>
    </div>


    <div id="zuihou-con">
        <div id="zuihou">
            <ul>
                <li><span class="one">网站地图&nbsp;&nbsp;|</span><span>&nbsp;&nbsp;集团下属公司</span></li>
                <li>增值电信业务经营许可证：粤B2-20120350 粤ICP备05087105号 粤文网[2018]10835-3804号 粤文审[2012]196号</li>
                <li>Copyright &copy;2013 深圳市金立通信设备有限公司 版权所有.</li>
            </ul>
            <div id="imgs">
                <img src="img/images/sf.png">
                <img src="img/images/govIcon.gif" class="two">
                <img src="img/images/b.png">
            </div>
            <div class="last">中国/简体中文+</div>
        </div>
    </div>
</body>

</html>
<script src="province.js"></script>
<script src="jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        var current_prov;
        var current_city;
        var current_country;
        /* 自动加载省份列表 */
        showPro();
    });

    function showPro() {
        $(".btn").disabled = true;
        var len = province.length;
        for (var i = 0; i < len; i++) {
            var provOpt = document.createElement("option");
            provOpt.innerText = province[i]['name'];
            provOpt.value = i;
            prov.appendChild(provOpt);
        }
    };
    /*根据所选的省份来显示城市列表*/
    function showCity(obj) {
        var val = obj.options[obj.selectedIndex].value;
        current_prov = val;
        if (val >= 0) {
            city.style.display = 'inline-block';
            country.style.display = 'none';
        } else {
            city.style.display = 'none';
            country.style.display = 'none';
        }
        if (val != null) {
            city.length = 1;
            if (province[val]) {
                var cityLen = province[val]["city"].length;
            }
            for (var j = 0; j < cityLen; j++) {
                var cityOpt = document.createElement('option');
                cityOpt.innerText = province[val]["city"][j].name;
                cityOpt.value = j;
                city.appendChild(cityOpt);
            }
        }
    };
    /*根据所选的城市来显示县区列表*/
    function showCountry(obj) {
        var val = obj.options[obj.selectedIndex].value;
        if (val >= 0) {
            country.style.display = 'inline-block';
        } else {
            country.style.display = 'none';
        }
        current_city = val;
        if (val != null) {
            country.length = 1;
            if (province[current_prov]["city"][val]) {
                var countryLen = province[current_prov]["city"][val].districtAndCounty.length;
            }
            if (countryLen == 0) {
                addrShow.value = province[current_prov].name + '-' + province[current_prov]["city"][val].name;
                return;
            }
            for (var n = 0; n < countryLen; n++) {
                var countryOpt = document.createElement('option');
                countryOpt.innerText = province[current_prov]["city"][val].districtAndCounty[n];
                countryOpt.value = n;
                country.appendChild(countryOpt);
            }
        }
    };

    function selectCountry(obj) {
        current_country = obj.options[obj.selectedIndex].value;
        $(".btn").disabled = false;

    };

    function showAddr() {
        var ss = province[current_prov].name + "|" +
            province[current_prov]['city'][current_city].name + "|" +
            province[current_prov]['city'][current_city]['districtAndCounty'][current_country];
        $("#addr-show").val(ss);
    }





    $.ajax({
        url: "http://10.35.162.123:8080/getdata",
        success: function(data) {
            let list = JSON.parse(data);
            list.forEach(function(item) {
                $(".data-name").html(item.title)
                $(".data-price").html(item.price)
                $(".data-num").html(item.num)
                $(".data-name").attr("id", item.shopId)
                $(".data-price1").html((item.price) * (item.num))
            })
        },


    })

    $(".orange").click(function() {
        let id = $(".data-name").attr("id")
        let name = $(".name").val()
        let place = $("#addr-show").val()
        let placemore = $("#inDetail").val()
        let tel = $(".tel").val()
        $.ajax({
            url: `http://10.35.162.123:8080/editdata?name=${name}&place=${place}&placemore=${placemore}&tel=${tel}&id=${id}`,
            success: function(data) {
                location.href = "http://10.35.162.123/jinlixiangmu/ceshi.html"
            }
        })
    })
</script>